<template>
  <div>
    <header-top title="添加作业" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div style="background: #f8f8f8" class="content clearfix">
      <ul class="studentExam">
        <li @click="showSelect" class="select">
          {{className}}
        </li>
        <li @click="subjectSelect" class="select">
          {{subject}}
        </li>
      </ul>
      <ul class="studentExam">
        <li class="text">
          <input type="text" placeholder="作业标题"  v-model="params.taskName">
        </li>
        <li>
          <textarea  placeholder="作业详情" class="textarea" v-model="params.taskContent">

          </textarea>
        </li>
      </ul>
      <van-uploader accept="" result-type="text" multiple="true" capture="camera" class="updata" :after-read="onRead">

      </van-uploader>



      <div class="bottomBut" @click="submit">发布</div>


    </div>

    <div v-if="show" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="show"
      show-toolbar
      title="选择班级"
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
      :default-index=index
    />
    <div v-if="subShow" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="subShow"
      show-toolbar
      title="选择科目"
      :columns="subjects"
      @cancel="onCancel"
      @confirm="onSubject"
      :default-index=subIndex
    />


  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import { Toast } from 'vant';   //使用消息提示
  import {reqSubject} from "@/api";


  export default {
    name: "addTask",
    components:{
      headerTop:headerTop,
    },
    data(){
      return{
        show:false,
        subShow:false,
        subject:"请选择科目",
        className:"请选择班级",
        columns: [{text:'选择班级',classId:null,gradeId:null}],
        subjects:[{text:'选择科目',subjectId:null}],
        index:0,
        subIndex:0,
        params:{
          taskName:null,
          taskContent:null,
        }
      }
    },
    async mounted(){
      let classList = this.$store.state.teacherClass
      for(let item of classList) {
        this.columns.push({text:item.gradeClassName,classId:item.id,gradeId:item.gradeId})
      }
      let subject = await reqSubject()
      for(let sub of subject.data) {
        this.subjects.push({text:sub.subjectName,subjectId:sub.id})
      }
    },
    methods:{
      showSelect(){
        this.show = true;
      },
      subjectSelect(){
        this.subShow = true;
      },
      onCancel() {
        this.show = false
        this.subShow = false;
      },
      onConfirm(value,index){
        this.className = value.text
        this.params.classId = value.classId
        this.index = index
        this.params.gradeId = value.gradeId
        this.show = false
      },
      onSubject(value,index){
        this.subject = value.text
        this.params.subjectId = value.subjectId
        this.params.subject = value.text
        this.subIndex = index
        this.subShow = false

      },
      onRead(file) {   //图片上传
        console.log(file.content)
      },
      submit(){
        console.log(this.params)
      }

    }
  }
</script>

<style scoped>
  .studentExam{ margin-top: 0.5rem; background: #fff;}
  .studentExam .select{width: 100%; height: 3.5rem; line-height: 3.5rem;  padding-left: 1rem; box-sizing: border-box; font-size: 1.1rem; color: #666;
    background:url("./images/studentExamIcon.png") no-repeat 25rem center; background-size: 0.5rem auto; border-bottom: 1px solid #f8f8f8 }
  .text{width: 100%; height: 3.5rem; line-height: 3.5rem; box-sizing: border-box; font-size: 1.1rem; color: #666;border-bottom: 1px solid #f8f8f8  }
  .text input{width: 100%; box-sizing: border-box; padding-left: 1rem; font-size: 1.1rem; height: 3.5rem; line-height: 3.5rem;}
  .button{width: 25rem; height: 2.9rem; line-height: 2.9rem; text-align: center; margin: 1.7rem auto 0; display: block; background: #00c08c; border: none; font-size:1.1rem; color: #fff; }
  .text input::-webkit-input-placeholder{
    color:#666;

  }
  .text input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#666;
  }
  .text input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#666;
  }
  .text input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#666;
  }
  .textarea{ width: 100%; height: 8.6rem;  padding: 1rem; margin-top: 0.5rem; border: none; font-size: 1.1rem; line-height: 1.8rem; color: #666;}
  .updata{width:100%; height: 2.8rem; background:url("./images/img.png") no-repeat 1rem center #fff; background-size: 1.1rem auto; margin-top: 1px;}

</style>
